<!-- 学生阅读报告-->
<template>
    <div class="report-student" @scroll="scrollLoad()" ref="report">
        <div class="report-main">
            <!-- 任务 -->
            <div class="task-card">
                <div class="module-title">阅读打卡计划</div>
                <ul>
                    <li class="clearfix shadow3" v-for="(item,index) in taskList" :key="index">
                        <img class="card-img left" :src="item.book.bookCover" alt="">
                        <div class="card-con left">
                            <h4>{{item.book.bookName}}</h4>
                            <p>{{item.checkInTask.dayCount}}天阅读计划的第{{item.checkInTask.countday}}天</p>
                            <div class="in-progress" ref="in-progress">
                                <div class="in-elapse" ref="in-elapse" :style="'width:'+ item.checkInTask.percent +'%;'"></div>
                            </div>
                        </div>
                    </li>
                </ul> 
                <div :class="['btn-more',{'btn-less':!isEllipsis}]" v-if="taskListJson.length>2" @click="moreFun()">{{isEllipsis ? '展开全部':'收起计划'}}</div>
            </div>
            <!-- 荣誉榜 -->
            <div class="rank">
                <div class="module-title">阅读荣誉榜</div>
                <ul class="shadow3">
                    <li>
                       <span>累计阅读了 {{myRead[0]}} 本书</span> 
                       <p>超过了 {{myRead[1]}}% 的用户</p>
                    </li>
                     <li>
                       <span>累计创建了 {{myRead[2]}} 个任务</span> 
                       <p>超过了 {{myRead[3]}}% 的用户</p>
                    </li>
                     <li>
                       <span>累计阅读了 {{Math.floor(myRead[4]%3600/60)}} 分钟</span> 
                       <p>超过了 {{myRead[5]}}% 的用户</p>
                    </li>
                </ul>
            </div>
            <!-- 我的动态 -->
            <div class="dynamic">
                <div class="module-title">我的动态</div>
                <!-- 时间轴列表 -->
                <div class="time-axis">
                    <ul class="day-list">
                        <li class="shadow3" v-for="(list,index) in dynamicList" :key="index">
                            <div class="day" v-show="list.dateShow">
                                <span>{{list.date}}</span>
                                <i>{{list.month}}月</i>
                            </div>
                            <h4 v-if="[3,4,5,6].includes(list.pushInfo.pushCategory)">{{list.pushInfo.description}}</h4>
                            <h4 v-if="list.pushInfo.pushCategory==1">评论了 {{list.pushInfo.toUserTrueName}} 关于《{{list.bookInfo.bookName}}》的读后感</h4>
                            <!-- 书评 -->
                            <div class="is-review" v-if="[0,2].includes(list.pushInfo.pushCategory)">
                                <h4 @click="goReview(list)" v-if="list.pushInfo.pushCategory==0">发表了关于《{{list.bookInfo.bookName}}》的读后感</h4>
                                <h4 @click="goReview(list)" v-if="list.pushInfo.pushCategory==2">点赞了 {{list.pushInfo.toUserTrueName}} 关于《{{list.bookInfo.bookName}}》的读后感</h4>
                                <p @click="goReview(list)" v-show="list.readingExperience.experienceContent">{{list.readingExperience.experienceContent}}</p>
                                <div class="review-page" v-show="list.readingExperience.pageInterval"><span>{{list.readingExperience.pageInterval}}</span></div>
                            </div>
                        </li>
                    </ul> 
                    <transition name='fade'>
                        <div class="no-con" v-show="noConShow">
                            <img src="@/assets/img/no-con.png" alt="">
                            <p>暂无书评...</p>
                        </div>
                    </transition> 
                    <div class="bottom-tips">{{bottomTip}}</div>   
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'

export default {
    name: "reportStu",
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            taskList:[],
            taskListJson:[],
            isEllipsis:true, //简介是否省略
            myRead:[],
            dynamicList:[],      //动态列表
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'',
            isLoading:true,
           
        }
    },
    watch:{
    },
    created(){ 
        this.$parent.menuShow=false;
        /****** 验证登录 *****/ 
		if(!sessionStorage.getItem("myInfo")){
			this.$router.replace({path:'/',query: {}});
		}else{
            this.getTaskList()
            this.getUserData()
            this.getDynamic(1)
        }
    },
    mounted(){
    },
    methods:{
        goReview(list){
            let item=list.readingExperience
            item.avatar=list.pushInfo.fromUserAvatar
            item.trueName=list.pushInfo.fromUserTrueName

            sessionStorage.setItem("thisReview",JSON.stringify(item))
            this.$router.push({path:'/review',query: {bookid:item.bookId,reviewid:item.experienceId}});
        },
        // 展开任务列表
        moreFun(){
            this.isEllipsis=!this.isEllipsis
            if(this.isEllipsis){
                this.taskList = this.taskListJson.slice(0,2)
            }else{
                this.taskList = this.taskListJson
            }
        },
        //任务列表
        getTaskList(){
            axGet('GetUserTask', {
               userId:this.userid
            }).then(res => {
                if(res.ResultCode===1){
                    this.taskListJson=res.Value
                    this.taskListJson.forEach((item,i)=>{
                        let time = item.checkInTask.createTime.slice(0,10)
                        let count = this.getCount(time)
                        let percent = count > item.checkInTask.dayCount ? 100 : (count/item.checkInTask.dayCount*100);
                        this.$set(item.checkInTask,'countday',count)
                        this.$set(item.checkInTask,'percent',percent)
                    })
                    this.taskList = this.taskListJson.slice(0,2)
                }
            })
        },
        getCount(time) {
            let counttime = new Date().getTime() - new Date(time).getTime()
            let countday = Math.ceil(counttime / 1000 / 60 / 60 / 24)
            return countday
        },
        //我的阅读数据
        getUserData(){
            axGet('GetUserDataStatistics', {
               userId:this.userid
            }).then(res => {
                if(res.ResultCode===1){
                    this.myRead=res.Value[0].concat(res.Value[1]).concat(res.Value[2])
                }
            })
        },
        //请求动态列表
        getDynamic(page){
            axGet('GetPersonalPushMesage', {
                userId: this.userid,
                PageIndex: page,
                PageSize:10,
            }).then(res => {
                if(res.ResultCode==1){
                    // 0心得 // 1评论 // 2心得点赞// 3评论点赞 // 4创建任务 // 5打卡日志 // 6答题
                    let listJson=res.Value.list
                    this.addData(listJson)
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.dynamicList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        // 数据组装
        addData(listJson){
            // console.log(listJson)
            listJson.forEach((item,i)=>{
                item.Date=item.pushInfo.createTime.substring(0,10)
                let month=0
                let date=0
                if(item.Date.charAt(5)==0){
                    month=item.Date.substring(6,7)
                }else{
                    month=item.Date.substring(5,7)
                }
                if(item.Date.charAt(8)==0){
                    date=item.Date.substring(9,10)
                }else{
                    date=item.Date.substring(8,10)
                }
                item.month=month;
                item.date=date;
                item.voiceOn=false;
                item.dateShow=true;
                this.dynamicList.push(item)
            })
            for(let i=0;i<this.dynamicList.length;i++){
                if(i+1<this.dynamicList.length){
                    if(this.dynamicList[i].Date==this.dynamicList[i+1].Date){
                        this.dynamicList[i+1].dateShow=false;
                    }
                }else if(this.dynamicList.length>1){
                    if(this.dynamicList[this.dynamicList.length-1].Date==this.dynamicList[this.dynamicList.length-2].Date){
                        this.dynamicList[this.dynamicList.length-1].dateShow=false;
                    } 
                }
            }
        },
        // 滚动加载   
        scrollLoad(){
            let bodyH = this.$refs['report'].clientHeight;
            let scrollH = this.$refs['report'].scrollTop;
            let listH = this.$refs['report'].scrollHeight;
            // console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                // console.log(this.totalPage)
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    this.getDynamic(page)
                }else{
                    if(this.dynamicList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    } 
                }
            }
        }, 
        
    }
}
</script>
<style type="text/css" scoped>
.report-student{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.report-main{
    padding: 0.54rem 0.32rem 0;
}
.btn-more{
    color: #01a0fe;
    font-size: 0.28rem;
    height: 0.68rem;
    line-height: 0.68rem;
    background: url(~@/assets/img/icon/more.png) no-repeat center right;
    background-size: 0.32rem 0.32rem;
    width: 1.56rem;
    margin: 0 auto;
}
.btn-less{
    background: url(~@/assets/img/icon/less.png) no-repeat center right;
    background-size: 0.32rem 0.32rem;
}
.rank{
    padding: 0.42rem 0 0.54rem; 
}
.rank ul{
    padding: 0.26rem 0 0.14rem 0.38rem;
    border-radius: 0.3rem;
    margin-top: 0.42rem;
}
.rank li{
    padding: 0.32rem 0 0 1.22rem;
    height: 1.4rem;
    box-sizing: border-box;
    background: no-repeat 0 center;
    background-size: 0.9rem 0.9rem;
    line-height: 1;
}
.rank li:nth-child(1){
    background-image:url(~@/assets/img/icon/rank-book.png) 
}
.rank li:nth-child(2){
    background-image:url(~@/assets/img/icon/rank-task.png) 
}
.rank li:nth-child(3){
    background-image:url(~@/assets/img/icon/rank-time.png) 
}
.rank li span{
    display: block;
    font-size: 0.3rem;
    font-weight: bold;
}
.rank li p{
    color: #999;
    padding: 0.18rem 0 0.36rem;
    border-bottom: 1px solid #eee;
}
.rank li:nth-child(3) p{
    border: 0;
}
.time-axis li h4{
    padding-top: 0;
}
</style>